折线

一个最简单的折线图的配置中需要包括一个grid、两个axis分别为x和y，以及series中的line，示例如下，可在官网中直接运行

        myChart = D3Charts.init('chart');

        var x = [];
        var y = [];

        for (var i = 1; i < 32; i++) {
            x.push('3月' + i + '日');
            y.push(Math.random() * 400 + 50);
        }

        myChart.setOption({
            grid: {}, // grid配置
            series: [
                {
                    type: 'line', // 图表类型
                    data: y, // 数据
                    name: '销量',
                    line: {
                        show: true,
                        style: {
                            normal: {
                                stroke: '#53A8E2'
                            }
                        }
                    }
                }
            ],
            // dataZoom: {}, // 可以控制axis的start和end
            axis: [
                {
                    position: 'bottom', // axis的放置位置
                    type: 'point', // axis的类型
                    data: x, // 数据
                    // $dataZoomIndex: 0, // 被第0个dataZoom所控制
                },
                {
                    position: 'left', // axis放置位置
                    type: 'linear', // axis类型
                    xOrY: 'y' // 作为y轴，默认为x轴
                }
            ],
            // axisPointer: [
            //     {
            //     }
            // ],
            // tooltip: [
            //     {
            //         trigger: 'axis',
            //         $axisIndex: 0
            //     }
            // ]
        });

组件详细配置项如下，每个配置项都有一个默认值：

        //data: undefined, // {Array} 系列中的数据内容数组。数组项通常为具体的数据项。数据项格式同echarts类似，http://echarts.baidu.com/option.html#series-line.data
        $dataIndex: undefined, // {number} 依赖的$data的index，格式同上，优先级低于data，取得的数据需符合data的格式
        dataKey: undefined, // {string|number} 搭配$dataIndex使用，方便从依赖的$data中取数据，等同于 data.map((d) => d[dataKey])，最终取得的数据需符合data的格式
        $axisIndex: [0, 1], // {Array} 所依赖axis的index，需包括一个x轴和y轴
        name: undefined, // {string} 系列名称，用于tooltip的显示，legend 的图例筛选

        // 折线配置
        line: {
            show: true, // {boolean} 是否显示折线
            style: {
                // 普通样式
                normal: {
                    fill: undefined,
                    stroke: '#058499',
                    lineWidth: 2
                },
                emphasis: undefined // 高亮样式
            }
        },

        // 区域填充配置
        area: {
            show: false, // {boolean} 是否显示面积
            style: {
                // 面积样式
                normal: {
                    fill: '#058499'
                },
                emphasis: undefined
            }
        },

        // 拐点标记
        symbol: {
            normal: {
                // 普通状态
                show: false, // {boolean|string} 是否显示拐点标记， true 显示坐标轴对应点 | false 不显示 | 'all' 显示全部
                type: 'circle', // {string} symbol类型 'line' | 'rect' | 'roundRect' | 'square' | 'circle' | 'diamond' | 'pin' | 'arrow' | 'triangle'
                offset: [0, 0], // {Array} [x, y]，偏移位置
                size: 8, // {number} symbol大小
                // 普通样式
                style: {}
            },
            emphasis: {
                // 高亮状态
                show: false, // {boolean} 是否显示高亮显示
                // 高亮样式
                style: {}
            }
        },

        // 拐点与坐标轴连线
        link: {
            normal: {
                // 普通状态
                show: false, // {boolean|string} 是否显示点到0轴连线， true 显示坐标轴对应点 | false 不显示 | 'all' 显示全部
                // 普通样式
                style: {}
            },
            emphasis: {
                show: false, // {boolean} 是否高亮显示
                // 高亮样式
                style: {}
            }
        },

        // 拐点上方的文本
        label: {
            normal: {
                // 普通状态
                show: false, // {boolean|string} 是否显示拐点上方值， true 显示坐标轴对应点 | false 不显示 | 'all' 显示全部
                // 普通样式
                style: {
                    position: 'top'
                },
                formatter: undefined // {Function} 文本格式化函数
            },
            emphasis: {
                show: false, // {boolean} 是否高亮显示
                // 高亮样式
                style: {}
            }
        },

        curve: {
            type: 'linear', // {String} curve类型，参考d3文档 https://github.com/xswei/d3js_doc/tree/master/API/d3-shape-master#curves
            param: undefined // 根据type不同，param代表的参数也不同，参考d3文档
        },
        connectNulls: false, // {Boolean} 是否连接空数据。
        legendHoverLink: true, // {Boolean} 是否与图例进行高亮联动
        selectedList: [], // {Array} 选中项，使用数据下标指定
        enableSelect: false, // {boolean|string} 是否开启选中, single(true) | multiple | false

        cursor: 'default', // {string} 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
        zlevel: 0, // {number} 所有图形的 zlevel 值
        z: 3, // {number} 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        animation: true, // {boolean} 是否开启动画。
        animationDuration: 500, // {number} 初始动画的时长
        animationEasing: 'cubicOut' // {string} 初始动画的缓动效果。不同的缓动效果可以参考 http://www.echartsjs.com/gallery/editor.html?c=line-easing。